<template>
  <div class="home">
    <!-- 音乐界面 -->
    <Music v-if="flag == true"></Music>
    <!-- 视频界面 -->
    <Video v-if="flag == false"></Video>

    <!-- 页脚 -->
    <Footer @getflag="getflag" :flag="flag"></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import Music from "../components/Music.vue";
import Video from "../components/Video.vue";

export default {
  components: {
    Footer,
    Music,
    Video,
  },
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    getflag(val) {
      this.flag = val;
    },
  },
};
</script>
<style scoped lang="scss">
  .home{
    overflow-y: auto;
    padding-bottom: 200px;
    // height: 100%;
  }
</style>
